<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">会话列表</block>
		</cu-custom>
        <view class='back' @click="back"></view>
		<view class="cu-list menu-avatar">
			<view class="cu-item" v-for="(item,index) in list" :key='index' @click="toDetail(item.id)">
				<view class="cu-avatar round lg">
                    
                <img :src="item.talkPartakeMembers[0].member_id == userData.member_id ? a_url + item.talkPartakeMembers[1].avatarurl : a_url + item.talkPartakeMembers[0].avatarurl" alt="" style="width:52px;height:52px">
				</view>
				<view class="content">
					<view class="text-grey">{{item.talkPartakeMembers[0].member_id == userData.member_id?item.talkPartakeMembers[1].name:item.talkPartakeMembers[0].name}}
                        ({{item.talkPartakeMembers[0].member_id == userData.member_id?item.talkPartakeMembers[1].member_id:item.talkPartakeMembers[0].member_id}})
                         <span v-if="item.type == 2">（好友）</span>
                         <span v-else>（临时）</span>
                         <button  class=" cu-btn round bg-red" @click.stop='delFriends(item)'>删除</button>
                    </view>
					<view class="text-gray text-sm flex">
						<template v-if="item.lastMessage">
							<text class="text-cut" v-if="item.lastMessage.body.type== 2">
								{{item.lastMessage.body.content.title}}
							</text>
							<text class="text-cut" v-if="item.lastMessage.body.type== 1">
								{{item.lastMessage.body.content}}
							</text>
						</template>
					</view>
				</view>
				<view class="action">
					<view class="text-grey text-xs">{{item.addTime}}</view>
					<view class="cu-tag round bg-grey sm" v-if="total != ''">{{total}}</view>
				</view>
			</view>
		</view>
		<newMessage ref='newMessage'></newMessage>
  </view>
</template>

<script>
	import newMessage from '../../asstess/newMessage/newMessage'
	export default {
		data() {
			return {
			    list: [],
			    tabCur: 0,
			    mainCur: 0,
			    verticalNavTop: 0,
                load: true,
                userData:[],
                total:'',
                a_url:'http://v3-a.xgwl.net.cn',
                avatar:'https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg',
			};
		},
        mounted(){
            this.$Socket.action(
                "readyStateLogin",
                null,
                () => {
                  this.list = this.$store.state.getTalkList  
                },
                () => {}
            );
        },
		onLoad() {
            // 获取本地存储内数据
            let data  = sessionStorage.getItem('userData')
            this.userData = JSON.parse(data)
            // 新消息弹框
            this.list = this.$store.state.getTalkList  
            console.log(this.list,'load会话列表')
            this.openData()
		},
		onReady() {
			uni.hideLoading();
		},
		components: {
			newMessage
		},
		methods: {
            // 删除好友
            delFriends(data){
                console.log('data',data)
                if(data.type == 2){
                    let talk_id = data.id
                    this.$Socket.action('deleteFriend', {
                        talk_id,
                    },(res)=>{
                        if(res.body.code == 200){
                            uni.showToast({
                                icon: 'success',
                                title: '删除成功',
                                duration: 2000
                            });
                        }else{
                            console.log('删除失败')
                        }
                    },()=>{})
                }else{
                    uni.showToast({
                        icon: 'none',
                        title: '不是好友',
                        duration: 2000
                    });
                }
                
            },
			TabSelect(e) {
				this.tabCur = e.currentTarget.dataset.id;
				this.mainCur = e.currentTarget.dataset.id;
				this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50;
			},
			VerticalMain(e) {
				// #ifdef MP-ALIPAY
					return false; //支付宝小程序暂时不支持双向联动
				// #endif
				let that = this;
				let tabHeight = 0;
				if (this.load) {
					for (let i = 0; i < this.list.length; i++) {
						let view = uni
						.createSelectorQuery()
						.select("#main-" + this.list[i].id);
						view
						.fields({size: true,},(data) => {
							this.list[i].top = tabHeight;
							tabHeight = tabHeight + data.height;
							this.list[i].bottom = tabHeight;
						})
						.exec();
					}
					this.load = false;
				}
				let scrollTop = e.detail.scrollTop + 10;
				for (let i = 0; i < this.list.length; i++) {
					if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
						this.verticalNavTop = (this.list[i].id - 1) * 50;
						this.tabCur = this.list[i].id;
						console.log(scrollTop);
						return false;
					}
				}
            },
            back() {
            uni.redirectTo({
                url: "../zhuanli/zhuanli"
            });
		    },
			toDetail(id) {
                this.total = ''
				uni.redirectTo({
					url: "./chat?id="+id,
				});
            },
            openData () {
                let newChatAlert = (data) =>{
                    if (data.head.fromMemberId != this.userData.member_id) {
                        console.log('data新消息',data);
                        // this.$refs.newMessage.showModal(data,this.userData.member_id) 
                    }
                    this.scrollTop()
                }
                let listRefresh = (data) =>{
                    console.log(data,'verticalnav页')
                    // let Data = this.getTalkList()
                    if(data != undefined){
                        this.newData(Data)
                    }
                    // this.total ++
                    // sessionStorage.setItem('getTalkList',JSON.stringify(this.newData(Data)))
                }
                let talkDetailRefresh = (data) =>{
                    console.log(data,'会话详情刷新')
                }
                let talkWithMsg = (msg) => {
                    if(!msg.isMe){
                        console.log('msg新消息',msg)
                        // this.$refs.newMessage.showModal(msg,this.userData.member_id)
                    }
                    this.scrollTop()
                }
                this.$Socket.action("addTalkObjectCallback", {
                    onNewChatAlert:newChatAlert,
                    onListRefresh:listRefresh,
                    onTalkDetailRefresh:talkDetailRefresh,
                    onTalkWithMsg:talkWithMsg,
                },()=>{},()=>{});
            },
            scrollTop(){
                setTimeout(()=>{
                    uni.pageScrollTo({
                        scrollTop: 99999999999,
                        duration: 10
                    })
            },0) 
            },
            getTalkList(){
                this.$Socket.action('getTalkList',null,(res)=>{
                    if(res.code==200){
                        return res.data
                    }
                },()=>{})
            },
            // newData(Data){
            //     if(Data){
            //         Data.map(item=>{
            //             for(let i =0; i < item.talkPartakeMembers.length;i++){
            //                 if(item.talkPartakeMembers[i].member_id != this.userData.member_id){
            //                     let arr = {}
            //                     arr = item.talkPartakeMembers[i]
            //                     item.talkPartakeMembers = []
            //                     item.talkPartakeMembers.push(arr)
            //                 }
            //             }
            //         })
            //         this.list = Data
            //     }
            //     console.log(this.$store.state.getTalkList,this.list);

            // }
            
		}
	};
</script>

<style>
    .back{
        background-color: transparent;
        width: 62px;
        height: 45px;
        position: fixed;
        top: 0px;
        z-index: 9999;
    }
	.fixed {
	  position: fixed;
	  z-index: 99;
	}

.VerticalNav.nav {
  width: 200upx;
  white-space: initial;
}

.VerticalNav.nav .cu-item {
  width: 100%;
  text-align: center;
  background-color: #fff;
  margin: 0;
  border: none;
  height: 50px;
  position: relative;
}

.VerticalNav.nav .cu-item.cur {
  background-color: #f1f1f1;
}

.VerticalNav.nav .cu-item.cur::after {
  content: "";
  width: 8upx;
  height: 30upx;
  border-radius: 10upx 0 0 10upx;
  position: absolute;
  background-color: currentColor;
  top: 0;
  right: 0upx;
  bottom: 0;
  margin: auto;
}

.VerticalBox {
  display: flex;
}

.VerticalMain {
  background-color: #f1f1f1;
  flex: 1;
}
</style>
